<template>
  <div class="list">
    <tmpHeader :index='8'/>
    <div class="main">
        <div class="iheader">
            <Button type="info" @click="add" class="buttonbox">
                <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
            </Button>
        </div>        
        <div class="tabList">
            <Table stripe :columns="columns1" :data="list"></Table>
            <div class="page">
                <Page :total="count" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="loadPage"/>
            </div>
        </div>
        <!-- model -->
        <Modal v-model="modalStatus" :loading="loading" :mask-closable="false" :title="`${['新增', '编辑'][type]}远程会诊类型`" :footer="null">
            <div class="model">
                <p class="title">基本信息</p>
                <div class="user">
                    <span><i style="color:red">*</i> 门诊名称：</span>
                    <input type="text" placeholder="请输入远程会诊类型名称" v-model="params.typeName" maxlength="10">
                </div>
                <div class="user">
                    <span>职称：</span>
                    <Select v-model="params.titleId" style="width:150px;margin-right:4px;" @on-change='relationwx' clearable @on-clear='relationwx'>
                    <Option
                        v-for ="item in titleList"
                        :value="item.dictType"
                        :key="item.dictType"
                        style='text-align:center;'
                    >{{ item.dictName }}</Option>
                    </Select>
                </div>
                <div class="user">
                    <span>门诊价格：</span>
                    <input min="0" max="999" v-model="params.cost" type="number" @input="srInput" class="inputnumber" />
                    <!-- <InputNumber :min='0' :max='9999' v-model="params.cost"></InputNumber> -->
                </div>
            </div>
            <div slot="footer" class="btn-group">
                <Button type="primary" @click="Save('formInline')" style="width:75px;height:35px;">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />提交
                </Button>
                <Button @click="modalStatus=false" style="width:75px;height:35px;">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>		
            </div>		
        </Modal>
    </div>
  </div>
</template>
<script>
import tmpHeader from "@/pages/organizat/contentmen/tmpHeader";
import api from "@/api/commonApi";
export default {
  components: {
    tmpHeader
  },
  data() {
    return {
      type: '', // '0'新增 '1' 编辑
      count: 0,
      pageNo: 1,
      pageSize: 10,
      loading: true,
      modalStatus: false,
      titleList: [],
      params: {
        id: '',
        titleId: "",
        typeName: "",
        cost: 0.01,
        createTime: null,
        updateTime: null,
        hospitalId: sessionStorage.getItem("hospitalId"),
        hospitalName: localStorage.getItem("hospitalName")
      },
      list: [],
      columns1: [
        { type: "iNum", title: "排序", width: 60, align: "center",
          render: (h, params) => {
              let iNum = (this.pageNo-1)*this.pageSize + params.index +1;
              return h("span", iNum);
          }
        },
        { key: "typeName", title: "名称", align: "center" },
        { key: "titleName", title: "职称", align: "center" },
        { key: "cost", title: "医事服务费价格（元）", align: "center" },
        {
          title:"设置",
          align:'center',
          render:(h, params) => {
            return h('a', {
              on: {
                click: () => {
                  this.edit(params.row)
                }
              }
            }, '编辑')
          }
        }
      ]
    };
  },
  created(){
    let breadList = [
      { path: "/index", title: "首页" },
      {
        path: "/index/operation/mechanism/index",
        title: "机构运营"
      },
      {
        path: "/index/operation/home",
        title: "机构配置管理"
      }
    ];
    this.$emit("changeBreadList", breadList);
  },
  mounted() {
    let doctor = localStorage.getItem("iremoteConsult");
    if (!doctor) {
      this.$Message.info("您还没有开通远程会诊,去开通");
      localStorage.setItem("homeIndex", 0);
      setTimeout(() => {
        this.functionJS.paramsNavgationTo(this, "homeinfo");
        // 公用方法
      }, 800);
    }
    this.getDataDoctorList();
    this.$axios.post(api.getTitle, {}).then(resp => {
      this.titleList = resp.data.object;
    })
  },
  methods: {
    //  新增
    add() {
      this.modalStatus = true;
      this.params.titleId = '';
      this.params.typeName = '';
      this.params.cost = 1;
      this.params.id = null;
      this.type = '0';
    },
    //  编辑
    edit(item) {
      this.type = '1';
      this.params.id = item.id;
      this.$axios.post(api.findRemoteConsultTypeById, {id: this.params.id}).then(res => {
        this.modalStatus = true;
        this.params.titleId = res.data.object.titleId;
        this.params.titleName = res.data.object.titleName;
        this.params.typeName = res.data.object.typeName;
        this.params.cost = res.data.object.cost;
        this.params.updateTime = res.data.object.updateTime;
        this.params.createTime = res.data.object.createTime;
      });
    },
    srInput(e) {
      this.params.cost = e.target.value.match(/^\d*(\.?\d{0,2})/g)[0] || null;
      if(e.target.value>999.99)this.params.cost=999.99
    },
    // 修改成功
    Save() {
      if(!this.params.typeName){
        this.$Message.error("请完整填写必填项");
        return;
      }
        this.titleList.forEach(i =>{
            if(this.params.titleId == i.dictType){
                this.params.titleName = i.dictName
            }
        })
      let params = this.params;
      let message = '成功'
      if(this.type === '0') {
        params.id = null;
        params.updateTime = null;
        params.createTime = null;
        message = '添加成功';
      } else {
        message = '修改成功';
      }     
      this.$axios.post(api.saveRemoteConsultType, params).then(res => {
        if (res.data.code) {
          this.modalStatus = false;
          this.$Message.info(message);
          this.getDataDoctorList();
        }  else {
          this.$Message.error(res.data.message);
        }
      });
    },
    // 加载门诊列表
    getDataDoctorList() {
      let datde = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        hospitalId: sessionStorage.getItem('hospitalId')
      }
      this.$axios.post(api.findRemoteConsultTypeList, datde).then(res => {
          if (res.data.code) {
            this.count = parseInt(res.data.object.total);
            this.list = res.data.object.records;
          }
        });
    },
    loadPage(index) {
      this.pageNo = index;
      this.getDataDoctorList()
    }
  }
};
</script>
<style lang="less" scoped>
  .list {
    width: calc(100%);
    padding: 10px 30px;
    margin: 0 auto;
    background: #fff;
    .main {
      width: 90%;
      margin: 0 auto;
      .iheader {
        width: 100%;
        margin: 10px auto;
        .buttonbox{
            background-color: #21c780;
            border: 1px solid#21c780;
        }       
    }
      .tabList {
        width: 100%;
        margin: 0 auto;
        .page{
            text-align: center;
            margin: 20px 0;
        }
      }
    }
  }
  .model {
    width: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    margin: 10px auto;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 3px #ebedf8;
    border-radius: 5px;
    margin-bottom: 20px;
    .title {
        font-size: 20px;
        padding-left: 15px;
        margin-bottom: 20px;
        color: #333;
        height: 40px;
        line-height: 40px;
        background: #ebedf8;         
    }
    .user {
      width: 100%;
      display: flex;
      flex-direction: row;
      align-items: center;
      margin: 10px 20px;
      span {
        width: 70px;
      }
      input {
        text-indent: 10px;
        width: 75%;
        border-radius: 5px;
        line-height: 30px;
        border: 1px solid #ddd;
        outline: none;
      }
      .inputnumber {
          width: 150px;
          background: #fff;
          border: none;
          outline: none;
          text-indent: 10px;
          line-height: 30px;
          border: 1px solid #ddd;
          border-radius: 4px;
          color: #666;
      }
      .inputnumber:focus{
        border-color:#5362e1
      }
    }
  }
  .btn-group{
    width: 100%;
    text-align:center;
}
</style>
